<!-- 消息 -->
<template>
	<view>
		<view class="yangshi">
			<u-tabs :list="list1" @click="clickname" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
				scrollable="false" lineColor="#0e5642" :lineWidth="70" :lineHeight='2' :itemStyle='{height:"75rpx"}'>
			</u-tabs>
		</view>
		<!-- 结核杆菌 -->
		<view v-show="activeIndex === 0">
			<view class="henderes">
				<view class="u-m-l-30 u-m-r-30">
					<u--form labelPosition="left" labelWidth="200rpx" :labelStyle="{fontSize:'26rpx',color:'#5f5e5f'}"
						:model="model1" ref="uForm">
						<!-- 首付预算 -->
						<!-- <u-form-item labelWidth="200rpx" label="公寓品牌" prop="userInfo.name" borderBottom
							@click="shows = true; " ref="item1">
							<u--input v-model="model1.userInfo.name" disabled inputAlign='right' disabledColor="#ffffff"
								placeholder="请选择" border="none" placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize='26rpx'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item> -->
						<!-- 几居室 -->
						<u-form-item label="几居室:" prop="userInfo.fang" borderBottom labelWidth="200rpx"
							@click="show = true;" ref="item1">
							<u--input v-model="model1.userInfo.fang" disabled inputAlign='right' disabledColor="#ffffff"
								placeholder="请选择" border="none" placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize='26rpx'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 房子所在地区 -->
						<u-form-item labelWidth="200rpx" label="房子所在地区:" prop="userInfo.city" borderBottom
							@click="showa = true; " ref="item1">
							<u--input v-model="model1.userInfo.city" disabled inputAlign='right' disabledColor="#ffffff"
								placeholder="请选择" border="none" placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize='26rpx'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 居住面积（㎡）： -->
						<u-form-item labelWidth="200rpx" label="居住面积(㎡)：" prop="userInfo.mian" borderBottom ref="item1">
							<u-search shape="square" searchIcon=' ' bgColor='#fff' :clearabled='false' height='50'
								:showAction='false' v-model="model1.userInfo.mian" inputAlign='right'
								@blur='getblur($event,2)' placeholder='请输入面积'>
							</u-search>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>
		<!-- 按照总价 -->
		<view v-show="activeIndex === 1">
			<view class="henderes">
				<view class="u-m-l-30 u-m-r-30">
					<u--form labelPosition="left" labelWidth="200rpx" :labelStyle="{fontSize:'26rpx',color:'#5f5e5f'}"
						:model="model1" ref="uForm">
						<!-- 首付预算 -->
						<u-form-item label="押金方式:" prop="userInfo.names" borderBottom labelWidth="200rpx"
							@click="showi = true;" ref="item1">
							<u--input v-model="model1.userInfo.names" disabled inputAlign='right'
								disabledColor="#ffffff" placeholder="请选择" border="none"
								placeholderStyle="color:#5f5e5f;fontSize: 24rpx" fontSize='26rpx'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 几居室 -->
						<u-form-item label="几居室:" prop="userInfo.fang" borderBottom labelWidth="200rpx"
							@click="show = true;" ref="item1">
							<u--input v-model="model1.userInfo.fang" disabled inputAlign='right' disabledColor="#ffffff"
								placeholder="请选择" border="none" placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize='26rpx'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 房子所在地区 -->
						<u-form-item labelWidth="200rpx" label="房子所在地区:" prop="userInfo.city" borderBottom
							@click="showa = true; " ref="item1">
							<u--input v-model="model1.userInfo.city" disabled inputAlign='right' disabledColor="#ffffff"
								placeholder="请选择" border="none" placeholderStyle="color:#5f5e5f;fontSize: 24rpx"
								fontSize='26rpx'></u--input>
							<u-icon slot="right" name="arrow-right"></u-icon>
						</u-form-item>
						<!-- 居住面积（㎡）： -->
						<u-form-item labelWidth="200rpx" label="居住面积(㎡)：" prop="userInfo.mian" borderBottom ref="item1">
							<u-search shape="square" searchIcon=' ' bgColor='#fff' :clearabled='false' height='50'
								:showAction='false' v-model="model1.userInfo.mian" inputAlign='right'
								@blur='getblur($event,2)' placeholder='请输入面积'>
							</u-search>
						</u-form-item>
					</u--form>
				</view>
			</view>
		</view>

		<u-picker :show="shows" :columns="bctions" @confirm='pinpian' :closeOnClickOverlay='true'
			@cancel="shows = false" @close='close'></u-picker>
		<u-picker :show="showi" :columns="listdata" @confirm='yajing' :closeOnClickOverlay='true'
			@cancel="showi = false" @close='close'></u-picker>

		<u-picker :show="show" :columns="actions" @confirm='confirm' :closeOnClickOverlay='true' @cancel="show = false"
			@close='close'></u-picker>
		<u-picker :show="showa" :columns="columns" :closeOnClickOverlay='true' @cancel="showa = false" @close='close'
			@confirm='getcon'></u-picker>
		<view class="u-abso boxdi">
			<view class="m-mg-lr u-flex u-flex-between boxtap">
				<view class="button-one" @click="getchong">重置</view>
				<view class="button-two " @click="submit">提交筛选</view>
			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showa: false,
				shows: false,
				showi: false,
				activeStyle: {
					color: '#0e5642',
					transform: 'scale(1.05)',
					fontSize: '22rpx'
				},
				inactiveStyle: {
					color: '#606266',
					fontSize: '22rpx'
				},
				cut2: null,
				cut1: null,
				pi1: null,
				pit1: null,
				pi2: null,
				pit2: null,
				params: {
					'title': '价位区间（千）'
				},
				columns: [],
				getcity: [],
				disabled: true,
				model1: {
					userInfo: {
						name: '',
						mian: '',
						fang: '',
						city: '',
						names: ''
					},
				},
				actions: [
					['一室一厅', '两室一厅', '两室两厅', '三室两厅', '四房两厅', '四房三厅', '五房两厅', '五房四厅', '六房两厅']
				],
				bctions: [],
				activeIndex: 0,
				list1: [{
					name: '按照品牌',
				}, {
					name: '按照押金',
				}],
				listdata: [
					['押一付一', '押一付二', '押二付一', '押三付一']
				]
			};
		},
		async onLoad() {
			let res = await this.require('getApartment'); //获取公寓品牌
			if (res) {
				let arr = []
				let name = {
					id: 0,
					createtime: 1639491597,
					name: "所有"
				};
				res.unshift(name);
				res.map((item, index) => {
					arr.push(item.name)
				})
				this.bctions.push(arr);
			}
			this.getcity = await this.require('getcity');
			let a = []
			this.getcity.map((p, i) => {
				a.push(p.name)
			})
			this.columns.push(a);
		},
		methods: {
			confirm(e) {
				this.model1.userInfo.fang = e.value[0];
				this.pi1 = e.indexs[0] === 0 ? 1 : (e.indexs[0] === 1 || e.indexs[0] === 2 ? 2 :
					(e.indexs[0] === 3 ? 3 : (e.indexs[0] === 4 || e.indexs[0] === 5 ? 4 : (e.indexs[0] === 6 || e
						.indexs[0] === 7 ? 5 : 6))))
				this.pit1 = e.indexs[0] === 0 || e.indexs[0] === 1 ? 1 : (e.indexs[0] === 5 ? 3 : (e
					.indexs[0] === 7 ? 4 : 2))
				this.show = false;
			},
			pinpian(e) {
				this.model1.userInfo.name = e.value[0];
				this.shows = false;
			},
			yajing(e) {
				this.model1.userInfo.names = e.value[0];
				this.showi = false;
			},
			getcon(e) {
				this.model1.userInfo.city = e.value[0];
				this.showa = false;
			},
			getblur(e, i) {
				if (parseFloat(e).toString() == 'NaN') {
					i === 1 ? this.model1.userInfo.name = '' : this.model1.userInfo.mian = ''
					return uni.$u.toast(`请输入文字`);
				}
			},
			getchong() {
				let model1 = {
					userInfo: {
						name: '',
						mian: '',
						fang: '',
						city: ''
					}
				}
				this.model1 = model1;
				this.cut1 = null;
				this.cut2 = null;
			},
			clickname(e) {
				this.activeIndex = e.index;
				this.model1.userInfo.name = '';
				this.model1.userInfo.mian = '';
				this.model1.userInfo.fang = '';
				this.model1.userInfo.city = '';
				this.model1.userInfo.names = '';
			},
			async submit() {
				let data = this.model1.userInfo;
				let index = this.activeIndex
				if (data.fang != '' || data.names != '' || this.cut1 != null || this.cut2 != null) {
					if (index === 0) {
						// if (data.name === '') {
						// 	uni.$u.toast('请选择公寓品牌');
						// 	return;
						// } else
						 if (data.fang === '') {
							uni.$u.toast('请选择几居室');
							return;
						} else if (data.city === '') {
							uni.$u.toast('请选择所在地区');
							return;
						} else if (data.mian === '') {
							uni.$u.toast('请填写面积');
							return;
						}
					}
					if (index === 1) {
						if (data.names === '') {
							uni.$u.toast('请选择押金方式');
							return;
						} else if (data.fang === '') {
							uni.$u.toast('请选择几居室');
							return;
						} else if (data.city === '') {
							uni.$u.toast('请选择所在地区');
							return;
						} else if (data.mian === '') {
							uni.$u.toast('请填写面积');
							return;
						}
					}
					let params = {};
					this.activeIndex === 0 ? params = this.model1.userInfo : (this.activeIndex === 0 ? params.name =
						this.list[this.cut1].label : params.names = this.listdata[this.cut2]);
					let list = {
						...this.params,
						pnum: this.pnum,
						// city: params.city,
						city:this.model1.userInfo.city,
						bedroom: this.pi1 <= 4 ? this.pi1 : '',
						bedroommax: this.pit1 > 4 ? '五室以上' : '',
						area: data.mian < 200 ? data.mian : '',
						areamax: data.mian >= 200 ? data.mian : '',
						paytype:this.model1.userInfo.names
					};
					console.log(list,'8888')
					this.nextNav('/pages/room/helpRoomList?list=' + JSON.stringify(list) + '&typu=' + '3');
				} else {
					uni.$u.toast('请选择或填写')
				}
			},
			close() {
				this.show = false;
				this.showa = false;
				this.shows = false;
				this.showi = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.boxdi {
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		height: 114rpx;
	}

	.boxtap {
		margin-top: 23rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.cut2-item {
		display: inline-block;
		padding: 0 30rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		height: 60rpx;



		line-height: 60rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.henders {
		background: #fff;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 12rpx;
		margin-top: 10px;
	}

	.item-on {
		background-color: #0e5642 !important;
		color: #FFFFFF;
	}

	.yangshi {
		height: 38px;
		background: #fff;
	}

	.henderes {
		background: #fff;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 12rpx;
		margin-top: 10px;
	}

	.button-one {
		border: 1rpx solid #0e5642;
		width: 40%;
		line-height: 80rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		border-radius: 12rpx;
		color: #0e5642;
	}

	.button-two {
		width: 40%;
		line-height: 80rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		border-radius: 12rpx;
		color: #fff;
		background: #0e5642;
	}

	.button-there {
		color: white;
		border-color: #0e5642;
		border-width: 1px;
		border-style: solid;
		margin-top: 5px;
		line-height: 40px;
		height: 30px;
		margin: 5px;

	}

	.anniu-se {
		width: 606px;
		background: #0e5642;
		height: 30px;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
	}

	.anniu-seone {
		width: 606px;
		background: #f7eee4;
		height: 30px;
		border-radius: 5px;
		text-align: center;
		line-height: 30px;
	}
</style>
